<template>
    <div class="text-blue-darken-1 text-h4 text-sm-h3 tw-text-center tw-mb-[16px] font-weight-bold">
        <div>{{ title }}</div>
    </div>
    <div class="text-body-1 tw-max-w-[600px] tw-m-auto tw-mb-8">
        <span class="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium text-grey-darken-1">{{
            desc
        }}</span>
    </div>
    <v-item-group multiple>
        <v-row>
            <v-col v-for="(item, index) in list" :key="index" cols="6" md="4" sm="6">
                <v-hover v-slot="{ isHovering, props }" open-delay="200">
                    <v-card color="blue-darken-1" variant="outlined" :elevation="isHovering ? 16 : 2"
                        :class="{ 'on-hover': isHovering }" class="mx-auto" max-width="260" v-bind="props">
                        <v-img :src="item.src" :alt="item.name" />
                    </v-card>
                </v-hover>
            </v-col>
        </v-row>
    </v-item-group>
</template>
<script setup lang="ts">
const props = defineProps({
    title: String,
    desc: String,
    list: Array
})
</script>